<template>
    <div class="chart-wrapper">
        <p class="chart-title">在职学历/全日制学历</p>
        <div class="chart-content" ref="dom"></div>
    </div>
</template>

<script>
    export default {
        name: "EducationChart",
        data() {
            return {
                chart: null,
                chartData: []
            }
        },
        mounted() {
        },
        methods: {
            updateChart(data) {
                this.chartData = data;
                let option = this.initOption();
                this.chart = this.$echarts.init(this.$refs.dom);
                this.chart.setOption(option);
            },
            initOption() {
                return {
                    backgroundColor: 'transparent',
                    color: ['#3A69C9', '#3b93f4'],
                    tooltip: {
                        axisPointer: {
                            type: 'shadow',
                        },
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 12,
                        },
                    },
                    grid: {
                        top: '50px',
                        left: '2%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    legend: {
                        orient: 'vertical',
                        itemGap: 5,
                        right: '4%',
                        top: '5',
                        //图例组件，颜色和名字
                        itemWidth: 10,
                        itemHeight: 10,
                        data: this.chartData.map(item => ({name: item.type}))
                    },
                    xAxis: [
                        {
                            type: 'category',
                            //	boundaryGap: true,//坐标轴两边留白
                            data: this.chartData[0].data.map(item => item.label),
                            axisTick: {
                                //坐标轴刻度相关设置。
                                show: false,
                            },
                            splitLine: {
                                //坐标轴在 grid 区域中的分隔线。
                                show: false,
                            },
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitNumber: 5,
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: ['#204C6F'],
                                    opacity: 0.3,
                                },
                            },
                            boundaryGap: ['0', '20%'],
                        },
                    ],
                    series: this.chartData.map(item => ({
                        name: item.type,
                        type: 'bar',
                        label: {
                            show: true,
                            color: '#3A69C9',
                            position: 'top'
                        },
                        data: item.data.map(item1 => item1.value),
                    }))
                };

            }
        }
    };
</script>

<style scoped lang="scss">
    $h: 25px;
    .chart-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
        .chart-title {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 2%;
            height: $h;
        }
        .chart-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
</style>
